<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/static/css/index/reset.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/static/css/select.css">
    <link href="/static/css/person/userInfo.css" rel="stylesheet" type="text/css">
</head>
<body>

<form id="security-from">
    <div class="security-list">
        <h2 class="title1">安全设置</h2>
        <div class="info-main">
            <div class="info-item">
                <span class="label">用户名：</span>
                <div class="label-f"><strong th:text="${userInfo.username}"></strong></div>
            </div>
            <div class="info-item">
                <span class="label">手机号：</span>
                <div class="label-f">
                    <input type="text" th:value="${userInfo.mobilePhone}" id="phoneNum" maxlength="20" name="mobilePhone" autocomplete="off">
                </div>
            </div>
            <div class="info-item">
                <span class="label">邮箱：</span>
                <div class="label-f">
                    <input type="text" th:value="${userInfo.email}" id="email" maxlength="20" name="email"  autocomplete="off">
                </div>
            </div>

            <div class="info-item">
                <span class="label identity-label">证件类型：</span>
                <div class="label-f">
                    <div class="birthday-box">
                        <div class="address-select">
                            <div class="address-box">
                                <div class="address-info" style="">
                                    <div class="select-title">
                                        <input type="text" name="identityCardTypeStr" placeholder="请选择" th:value="${userInfo.identityCardType}==1?'身份证':(${userInfo.identityCardType}==2?'军官证':(${userInfo.identityCardType}==3?'护照证':''))" readonly class="unSelect">
                                        <i class="arrow"></i>
                                    </div>
                                    <dl class="option">
                                        <dd data-value="1">身份证</dd>
                                        <dd data-value="2">军官证</dd>
                                        <dd data-value="3">护照证</dd>
                                    </dl>
                                </div>
                            </div>
                            </div>
                        <span class="label identity-num-label">证件号：</span>
                        <input type="text" name="identityCardNo" th:value="${userInfo.identityCardNo}" placeholder="请输入证件号"  class="identityNum">

                    </div>
                </div>

            </div>

            <input type="text" name="userInfoId" th:value="${userInfo.userInfoId}" hidden class="userInfoId">
            <input type="button" class="security-submit-btn" value="提交">

        </div>

    </div>

</form>


<!--先导入jQuery，再导入js文件，顺序有要求-->
<script src="/static/js/consume/jquery-1.7.2.js"></script>
<script src="/static/js/consume/userInfo.js"></script>
<script src="/static/js/consume/WcyUpdateInfo.js"></script>
<script src="/static/js/consume/select.js"></script>
<script>
    $(function (){
        $(".security-submit-btn").on("click",function (){
            $.ajax({
                url:"/eight/userInfo/modifyPersonSecurity",
                data:$("#security-from").serialize(),
                type:"post",
                success:function (data){
                    if(data.code == 0){
                        window.location.reload();
                    }
                }
            })
        })
    })
</script>
</body>
</html>